<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/list.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
    <header>
        <h1 class="title">
            驾校圈
        </h1>
        <a href="#">
            <i class="iconfont icon-xiangji"></i>
        </a>
    </header>

    <section>
        <div class="con-top">
            <a class="con-top-on" href="#">海淀驾校</a>
            <a href="#">最新</a>
            <a href="#">学车趣事</a>
        </div>
        <ul class="msg-list">
            <li class="clearfix">
                <img class="fl" src="./images/list/headImg1.png" alt="">
                <h3 class="name fl">
                    郑洪美
                </h3>
                <p class="msg fl">
                    买科目二学时能买多少学时?
                </p>
                <p class="time fr">
                    <span class="min fl">
                        24分钟前
                    </span>
                    <span class="fl">
                        海淀驾校
                    </span>
                    <i class="fr iconfont icon-jurassic_message"> 0</i>
                    <i class="fr iconfont icon-z-like"> 0</i>
                </p>
            </li>
            <li class="clearfix">
                <img class="fl" src="./images/list/headImg1.png" alt="">
                <h3 class="name fl">
                    车神附体
                </h3>
                <p class="msg fl">
                    科目一都考不过
                    <img src="./images/list/emoji1.png" alt="">
                </p>
                <p class="time fr">
                    <span class="min fl">
                        40分钟前
                    </span>
                    <span class="fl">
                        海淀驾校
                    </span>
                    <i class="fr iconfont icon-jurassic_message"> 0</i>
                    <i class="fr iconfont icon-z-like"> 0</i>
                </p>
            </li>
            <li class="clearfix">
                <img class="fl" src="./images/list/headImg1.png" alt="">
                <h3 class="name fl">
                    の
                </h3>
                <p class="msg fl">
                    倒库练了一中午 才学会 
                    <img src="./images/list/emoji2.png" alt="">
                </p>
                <p class="time fr">
                    <span class="min fl">
                        48分钟前
                    </span>
                    <span class="fl">
                        海淀驾校
                    </span>
                    <i class="fr iconfont icon-jurassic_message"> 0</i>
                    <i class="fr iconfont icon-z-like"> 2</i>
                </p>
            </li>
            <li class="clearfix">
                <img class="fl" src="./images/list/headImg2.png" alt="">
                <h3 class="name fl">
                    ！！奋斗
                </h3>
                <p class="msg fl">
                    有没有明天下午约考科一的
                </p>
                <p class="time fr">
                    <span class="min fl">
                        55分钟前
                    </span>
                    <span class="fl">
                        海淀驾校
                    </span>
                    <i class="fr iconfont icon-jurassic_message"> 0</i>
                    <i class="fr iconfont icon-z-like"> 2</i>
                </p>
            </li>
            <li class="clearfix">
                <img class="fl" src="./images/list/headImg2.png" alt="">
                <h3 class="name fl">
                    ！！奋斗
                </h3>
                <p class="msg fl">
                    有没有明天下午约考科一的
                </p>
                <p class="time fr">
                    <span class="min fl">
                        1小时前
                    </span>
                    <span class="fl">
                        海淀驾校
                    </span>
                    <i class="fr iconfont icon-jurassic_message"> 0</i>
                    <i class="fr iconfont icon-z-like"> 0</i>
                </p>
            </li>
            <li class="clearfix">
                <img class="fl" src="./images/list/headImg1.png" alt="">
                <h3 class="name fl">
                    刘铁辰
                </h3>
                <p class="msg fl">
                    明天就拿证了
                </p>
                <p class="time fr">
                    <span class="min fl">
                        55分钟前
                    </span>
                    <span class="fl">
                        1小时前
                    </span>
                    <i class="fr iconfont icon-jurassic_message"> 1</i>
                    <i class="fr iconfont icon-z-like"> 0</i>
                </p>
            </li>
        </ul>
    </section>
    
    <footer>
        <ul class="foot-list">
            <li>
                <a href="#">
                    <i class="iconfont icon-iconfontzhizuobiaozhun023101"></i>
                    <span>
                        首页
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-baoming"></i>
                    <span>
                        报名
                    </span>
                </a>
            </li>
            <li class="foot-list-on">
                <a href="#">
                    <i class="iconfont icon-quanquanb"></i>
                    <span>
                        驾校圈
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-wode"></i>
                    <span>
                        我的
                    </span>
                </a>
            </li>
        </ul>
    </footer>
</body>
</html>